<template>
    <section class="table">
  			 
			<div class="topList">
				<table class="topTable">
                  <thead>
                      <tr class="top_tr">
                        <th v-for="(val,key) in tableLabel" v-if="val.type===0">{{val.name}}</th>
                        <!--<th class="state_auto" >
                        	<div style="height: 17px;position: absolute;top: -12px; width: 102px;left: 18px;">
                        			自动处理状态
                        	</div>
                        	<span class="first">系统上报</span>
                        	<span class="second">通知民警</span>
                        </th>-->
                        <th class="special_th" v-for="(val,key) in tableLabel"  v-if="val.type===1">
                        	<div style="height: 20px;margin-top: -12px;">
                        			{{val.name}}
                        	</div>
                        	<span class="small_title" v-for="(item,index) in val.title">{{item}}</span>
                        </th>
                        
                        <th v-for="(val,key) in tableLabel" v-if="val.type===2" style="padding: 0 10px;">详情</th>
                      </tr>
                  </thead>
                  <tbody>
                    <tr class="data_tr" v-for="(item,index) in tableData">
                      <td v-for="(val,key) in item" v-if="typeof(val)!='object' && key!='detailDiy'">{{val}}</td>
            		   
            		   <td class="spacial_td" v-for="(objVal,objKey) in item" v-if="typeof(objVal)==='object'">
            		   	<span v-for="(itemVal,itemKey) in objVal" v-if="objKey.indexOf('stateDiy1')!=-1">
                      		<img v-if="itemVal==='1'" src="../assets/yes.png"/>
                      		<span v-if="itemVal==='0'"></span>
                      		<span v-if="itemVal!='1' && itemVal!='0'">{{itemVal}}</span>
                      	</span>
                      	<span v-for="(itemVal,itemKey) in objVal" v-if="objKey.indexOf('stateDiy2')!=-1">
                      		<span >{{itemVal}}</span>
                      	</span>
            		   </td>
                      <!--<td :class="{not_normal:item.result !='通过'}">{{item.result}}</td>-->
                      <!--<td :class="{not_normal:item.normal !='正常'}">{{item.normal}}</td>-->
                    <!--<td class="spacial_td" >
                      	<span >
                      		<img v-if="item.xitong==='1'" src="../assets/yes.png"/>
                      	</span>
                      	<span>
                      		<img v-if="item.minjing==='1'" src="../assets/yes.png"/>
                      	</span>
                      </td>-->
                      <td v-for="(val,key) in item" v-if="key==='detailDiy'">
                      		<img style="margin-top: 13px;cursor: pointer;"  @click="showOther(item)"  src="../assets/detail.png"/>
                      </td>
                      <!--<td>
                      		<img style="margin-top: 13px;cursor: pointer;"  @click="showOther(item)"  src="../assets/detail.png"/>
                      </td>-->
                    </tr>
                  </tbody>
                </table>
                
            </div>
            
            <el-pagination
			    layout="prev, pager, next"
			    :total="50">
			  </el-pagination>
    </section>
</template>

<script>
    
    export default {
    	props:{
    		tableData:'',
    		tableLabel:'',
    	},
        data() {
          return {
          		
          };
        },
        methods: {
        	showOther(val){
        		this.$emit("showOther",val);
        	}
        }
  };
</script>

<style >
	
	.table .el-pagination{
		text-align: center;
		margin-top: 20px
	}
	.table .el-pager li{
		background: unset;
		color: #fff;
	}
	.table .el-pager li.active{
		color: #409EFF;
	}
	.table .el-pagination .btn-next,.table  .el-pagination .btn-prev{
		background: unset;
		color: #fff;
	}
	.table .small_title{
		 margin-top: 10px;
    	height: 1px;
     	margin: 0 3px;
	}
	.table .special_th{
		display: table-cell;
    justify-content: space-around;
	}
	
   .table .topList{
     	    width: 96%;
		    /*width: 22vw;*/
		    margin-top: 26px;
			background: linear-gradient(to bottom, #a1e5eb 6%, transparent 6%, transparent 94%, #a1e5eb 94%) 0 0 no-repeat, linear-gradient(to top, #a1e5eb 6%, transparent 6%, transparent 94%, #a1e5eb 94%) 100% 100% no-repeat, linear-gradient(to right, #a1e5eb 2%, transparent 2%, transparent 98%, #a1e5eb 98%) 0 0 no-repeat, linear-gradient(to left, #a1e5eb 2%, transparent 2%, transparent 98%, #a1e5eb 98%) 100% 100% no-repeat, linear-gradient(to right, rgba(200, 200, 200, 0) 10%, transparent 10%, transparent 90%, rgba(200, 200, 200, 0.05) 90%) 0 0 repeat, linear-gradient(rgba(200, 200, 200, 0.05) 10%, transparent 10%, transparent 90%, rgba(200, 200, 200, 0.05) 90%) 0 0 repeat;
		    /*background: linear-gradient(to bottom, #a1e5eb 4%, transparent 4%, transparent 96%, #a1e5eb 96%) 0 0 no-repeat, linear-gradient(to top, #a1e5eb 4%, transparent 4%, transparent 96%, #a1e5eb 96%) 100% 100% no-repeat, linear-gradient(to right, #a1e5eb 4%, transparent 4%, transparent 96%, #a1e5eb 96%) 0 0 no-repeat, linear-gradient(to left, #a1e5eb 4%, transparent 4%, transparent 96%, #a1e5eb 96%) 100% 100% no-repeat, linear-gradient(to right, rgba(200, 200, 200, 0.1) 10%, transparent 10%, transparent 90%, rgba(200, 200, 200, 0.1) 90%) 0 0 repeat, linear-gradient(rgba(200, 200, 200, 0.1) 10%, transparent 10%, transparent 90%, rgba(200, 200, 200, 0.1) 90%) 0 0 repeat;*/
		    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 6px 6px, 6px 6px;
		    border: 1px solid #166274;
		    border-radius: 4px;
		    text-align: center;
     }
    .table .topTable {
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    /*margin-top: 21px;*/
    /*margin-bottom: 25px;*/
    
}

.table table {
    margin-left: 1px;
}
.table table {
    border-collapse: collapse;
    border-spacing: 0;
}
.table .topTable thead {
    background-color: rgba(0, 122, 215, 0.3);
}

.table .top_tr th{
	position: relative;
}
.table .topTable .top_tr{
	 height: 52px;
    line-height: 52px;
    font-size: 15px;
    /*color: #5ad0fb;*/
}

.table .topTable .data_tr{
	 height: 52px;
    line-height: 52px;
    font-size: 13px;
}
.table .not_normal{
	color: red;
}
.table .state_auto .first{
	position: absolute;
    font-size: 12px;
    left: 10px;
    top: 10px;
}
.table .state_auto .second{
	position: absolute;
    font-size: 12px;
    right: 15px;
    top: 10px;
}
.table .spacial_td {
	/*display: flex;*/
    /*justify-content: space-evenly;*/
}
	
.table .spacial_td span{
	/*position: absolute;*/
	display: inline-block;
	width: 50px;
	text-align: center;
}

</style>